Drop support of webpack-dev-server ^4.8, add support for webpack-dev-server ^5.0 #1318

Kocal · 2024-08-31T20:53:27Z

Upgrade webpack-dev-server didn't have impact for Encore itself, but it can be the case for end-users.

After upgrading webpack-dev-server to ^5.0, my project that use the following devServer configuration is still working as expected:

Encore.configureDevServerOptions((options) => {
    options.allowedHosts = 'all';
    options.client = {
        overlay: false, // hidden overlay: multiple errors caused by third-party scripts
    };
    options.server = {
        type: 'https',
        options: {
            pfx: path.join(process.env.HOME, '.symfony5/certs/default.p12'),
        },
    };
})

stof · 2024-09-02T09:34:34Z

CHANGELOG.md

@@ -12,6 +12,8 @@ This is a new major version that contains several backwards-compatibility breaks

 * #1309 Drop ESLint integration (@Kocal) 

+* #1318 Drop webpack-dev-server 4 support, only webpack-dev-server 5 is supported (@Kocal)


I suggest mentioning that the supported option in the configuration callback have changed, with a link to their changelog. They have BC breaks in their configuration.

…server ^5.0

…8494) Description ----------- ### Description The release of webpack-encore v5 dropped the webpack-dev-server as a dependency and is considered a BC Break, basically why our current config doesn't work: #8371 (comment) > yes it is unrelated, but I noticed it does not work at all 🙃 * https://github.com/symfony/webpack-encore/releases/tag/v5.0.0 * See symfony/webpack-encore#1318 * See symfony/webpack-encore#1336 This PR adds `webpack-dev-server` in v5 as a dependency and adds some configuration to enable hot module reload. ![image](https://github.com/user-attachments/assets/860f5a7d-9dd5-4cbc-bf9e-6abe0834a347) ___ ### Running one devServer for both configurations The current configuration within the `webpack.config.js` checks for the CSS files within the following two paths: * core-bundle/assets/styles/* * core-bundle/contao/themes/flexible/styles/* Changes that are detected in these styles will trigger the reload of the page, thus making it easier for us to work with our assets. As of right now we have 2 Encore configurations, thus kicking out the devServer from the second configuration (as you would have to tie it to another port). The first configuration actually embeds the output path of the backend theme `flexible` so it works both ways. ___ ### Should this be a Bugfix and backported to 5.3? The dev-server has been broken since changing to webpack-encore ^v5 but this is more for DX when working on contao. Backporting this change could be done in a separate PR but I don't think it's really necessary. Commits ------- af290cf Re-Add webpack-dev-server and configure HMR eb15149 Rename the backend.js asset 921ef56 Also consider the `themes/flexible` icons and fonts for HMR 2825107 Trigger pcss compilation on imported files 8add074 Match the webpack configuration for the new IconMinimizer feature 65d6e70 Watch the `core-bundle/contao` directory for template changes as well c4933af Also add the new `contao-backend` asset to all occurrences e84e01a Update the package.lock a7b6b8f Update package-lock 5545373 Revert the `contao-backend` entry and update the public path in DevSe… e6a0964 Update `package-lock.json` 46af7a7 Revert and rebuild the assets 4c85023 Simplify webpack configuration 9818a8d Update webpack configuration d051785 Remove the trailing slashes and uncomment the live reload for HMR

… #8494) Description ----------- ### Description The release of webpack-encore v5 dropped the webpack-dev-server as a dependency and is considered a BC Break, basically why our current config doesn't work: contao/contao#8371 (comment) > yes it is unrelated, but I noticed it does not work at all 🙃 * https://github.com/symfony/webpack-encore/releases/tag/v5.0.0 * See symfony/webpack-encore#1318 * See symfony/webpack-encore#1336 This PR adds `webpack-dev-server` in v5 as a dependency and adds some configuration to enable hot module reload. ![image](https://github.com/user-attachments/assets/860f5a7d-9dd5-4cbc-bf9e-6abe0834a347) ___ ### Running one devServer for both configurations The current configuration within the `webpack.config.js` checks for the CSS files within the following two paths: * core-bundle/assets/styles/* * core-bundle/contao/themes/flexible/styles/* Changes that are detected in these styles will trigger the reload of the page, thus making it easier for us to work with our assets. As of right now we have 2 Encore configurations, thus kicking out the devServer from the second configuration (as you would have to tie it to another port). The first configuration actually embeds the output path of the backend theme `flexible` so it works both ways. ___ ### Should this be a Bugfix and backported to 5.3? The dev-server has been broken since changing to webpack-encore ^v5 but this is more for DX when working on contao. Backporting this change could be done in a separate PR but I don't think it's really necessary. Commits ------- af290cf7 Re-Add webpack-dev-server and configure HMR eb151492 Rename the backend.js asset 921ef56f Also consider the `themes/flexible` icons and fonts for HMR 2825107e Trigger pcss compilation on imported files 8add0747 Match the webpack configuration for the new IconMinimizer feature 65d6e704 Watch the `core-bundle/contao` directory for template changes as well c4933afb Also add the new `contao-backend` asset to all occurrences e84e01ab Update the package.lock a7b6b8f6 Update package-lock 5545373b Revert the `contao-backend` entry and update the public path in DevSe… e6a09647 Update `package-lock.json` 46af7a7a Revert and rebuild the assets 4c850230 Simplify webpack configuration 9818a8d1 Update webpack configuration d0517850 Remove the trailing slashes and uncomment the live reload for HMR

Kocal force-pushed the feat/webpack-encore-1290 branch 2 times, most recently from fc3f6a3 to 77c6c42 Compare August 31, 2024 20:54

Kocal requested a review from stof August 31, 2024 20:54

stof reviewed Sep 2, 2024

View reviewed changes

Kocal force-pushed the feat/webpack-encore-1290 branch from 77c6c42 to 83af774 Compare September 2, 2024 15:19

Kocal requested a review from stof September 2, 2024 16:08

stof approved these changes Sep 2, 2024

View reviewed changes

Drop support of webpack-dev-server ^4.8, add support for webpack-dev-…

c521591

…server ^5.0

Kocal force-pushed the feat/webpack-encore-1290 branch from 83af774 to c521591 Compare September 2, 2024 20:13

Kocal merged commit 005a976 into symfony:main Sep 2, 2024
28 checks passed

Kocal deleted the feat/webpack-encore-1290 branch September 2, 2024 20:22

zoglo mentioned this pull request Jun 28, 2025

Re-add webpack-dev-server and configure hot module replacement contao/contao#8494

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Drop support of webpack-dev-server ^4.8, add support for webpack-dev-server ^5.0 #1318

Drop support of webpack-dev-server ^4.8, add support for webpack-dev-server ^5.0 #1318

Uh oh!

Kocal commented Aug 31, 2024

Uh oh!

stof Sep 2, 2024

Uh oh!

Kocal Sep 2, 2024

Uh oh!

Uh oh!

Uh oh!

		@@ -12,6 +12,8 @@ This is a new major version that contains several backwards-compatibility breaks

		* #1309 Drop ESLint integration (@Kocal)

		* #1318 Drop webpack-dev-server 4 support, only webpack-dev-server 5 is supported (@Kocal)

Uh oh!

Drop support of webpack-dev-server ^4.8, add support for webpack-dev-server ^5.0 #1318

Drop support of webpack-dev-server ^4.8, add support for webpack-dev-server ^5.0 #1318

Uh oh!

Conversation

Kocal commented Aug 31, 2024

Uh oh!

stof Sep 2, 2024

Choose a reason for hiding this comment

Uh oh!

Kocal Sep 2, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!